<template>
  <div class="game-setup">
    <h2>中国象棋</h2>
    <div class="setup-form">
      <div class="form-group">
        <label>选择您的阵营：</label>
        <div class="camp-options">
          <button 
            :class="['camp-btn', { active: selectedCamp === CAMP.RED }]"
            @click="selectCamp(CAMP.RED)"
          >红方</button>
          <button 
            :class="['camp-btn', { active: selectedCamp === CAMP.BLACK }]"
            @click="selectCamp(CAMP.BLACK)"
          >黑方</button>
        </div>
      </div>



      <div class="form-group">
        <label>选择难度等级：</label>
        <div class="difficulty-options">
          <button 
            :class="['difficulty-btn', { active: selectedDifficulty === DIFFICULTY.EASY }]"
            @click="selectDifficulty(DIFFICULTY.EASY)"
          >简单</button>
          <button 
            :class="['difficulty-btn', { active: selectedDifficulty === DIFFICULTY.MEDIUM }]"
            @click="selectDifficulty(DIFFICULTY.MEDIUM)"
          >中等</button>
          <button 
            :class="['difficulty-btn', { active: selectedDifficulty === DIFFICULTY.HARD }]"
            @click="selectDifficulty(DIFFICULTY.HARD)"
          >困难</button>
        </div>
      </div>

      <button 
        class="start-btn" 
        @click="startGame"
        :disabled="!isFormValid"
      >开始游戏</button>
    </div>
  </div>
</template>

<script>
import { CAMP, DIFFICULTY, DEFAULT_AI_MODEL } from '../config/gameConfig'

export default {
  name: 'GameSetup',
  data() {
    return {
      CAMP,
      DIFFICULTY,
      selectedCamp: null,
      selectedDifficulty: null
    }
  },
  computed: {
    isFormValid() {
      return this.selectedCamp && this.selectedDifficulty
    }
  },
  methods: {
    selectCamp(camp) {
      this.selectedCamp = camp
    },

    selectDifficulty(difficulty) {
      this.selectedDifficulty = difficulty
    },
    startGame() {
      if (this.isFormValid) {
        this.$emit('game-start', {
          camp: this.selectedCamp,
          model: DEFAULT_AI_MODEL,
          difficulty: this.selectedDifficulty
        })
      }
    }
  }
}
</script>

<style scoped>
.game-setup {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}

.setup-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.camp-options,
.model-options,
.difficulty-options {
  display: flex;
  gap: 10px;
  justify-content: center;
}

button {
  padding: 10px 20px;
  border: 2px solid #ddd;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  transition: all 0.3s ease;
}

button.active {
  background-color: #4CAF50;
  color: white;
  border-color: #4CAF50;
}

button:hover:not(:disabled) {
  border-color: #4CAF50;
}

button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.start-btn {
  margin-top: 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 15px 30px;
  font-size: 1.1em;
  border-radius: 5px;
}

.start-btn:not(:disabled):hover {
  background-color: #45a049;
}

label {
  font-size: 1.1em;
  font-weight: bold;
}
</style>